<template>
  <!-- 普通用户编辑弹框 -->
  <a-modal
    title="短信模板配置"
    width="800px"
    centered
    :visible="messageConfigVisible"
    :maskClosable="false"
    @cancel="close"
  >
    <a-form-model
      ref="form"
      :model="form"
      :rules="rules"
      v-bind="formLayout"
      class="inform-form"
      style="height:auto;"
    >
      <a-row :gutter="24">
        <a-col :span="24">
          <a-form-model-item label="可用标签">
            <div class="insertLable">
              <ul>
                <li v-for="(item,index) in insertLable" :key="index">
                  <p>
                    {{item.strName}}:
                    <span @click="insert(item.strCode)">{{item.strCode}}</span>
                  </p>
                </li>
              </ul>
            </div>
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row :gutter="24">
        <a-col :span="24">
          <a-form-model-item label="短信内容" prop="smsContent">
            <a-textarea
              v-model="form.smsContent"
              id="textarea1"
              data-index="1"
              :auto-size="{ minRows: 3, maxRows: 5 }"
              autocomplete="off"
              @focus="getFocus($event)"
            />
          </a-form-model-item>
        </a-col>
      </a-row>
    </a-form-model>
    <template slot="footer">
      <a-button type="primary" @click="submitInform('form')">确定</a-button>
    </template>
  </a-modal>
</template>

<script>
import { messageTemplate } from "@/api/message";
export default {
  props: {
    //关闭弹框
    closeFunc: {
      type: Function,
      default: () => {}
    },
    messageConfigVisible: {
      type: Boolean,
      default: false
    },
    id: {
      type: String,
      default: ""
    },
    code: {
      type: String,
      default: ""
    },
    //保存更新数据
    updateMessage: {
      type: Function,
      default: () => {}
    }
  },
  data() {
    return {
      form: {
        modeCode: "",
        msgType: "",
        sendType: "",
        smsContent: ""
      },
      formLayout: {
        labelCol: { span: 3 },
        wrapperCol: { span: 21 }
      },
      rules: {
        mobile: [
          
          {
            max: 11,
            message: "长度不合法, 手机号限11位",
            trigger: ["blur", "change"]
          },
          {
            validator: (rule, value, callback) => {
              const number = /^[0-9]+$/;
              if (value && !number.test(value)) {
                callback(new Error("只允许输入数字"));
              } else {
                callback();
              }
            },
            trigger: ["blur", "change"]
          },
          {
            pattern: /^1(3|4|5|6|7|8)\d{9}$/,
            message: "请输入正确的手机号"
          },
          { required: true, message: "请输入手机号", trigger: "blur" }
        ]
      },
      insertLable: [],
      focusIndex: null
    };
  },
  methods: {
    submitInform(formName) {
      //提交弹框表单
      this.loading = true;
      this.$refs[formName].validate(valid => {
        if (!valid) {
          this.loading = false;
          return false;
        }
        var params = Object.assign({}, this.form);
        params.id = this.id;
        params.modeCode = this.code;
        this.configTemplate(params);
      });
    },
    configTemplate(params) {
      messageTemplate.config(params).then(res => {
        this.$message.destroy();
        this.$message.success(res.data.msg);
        this.$emit("updateMessage");
      });
    },
    //关闭弹框
    close() {
      this.$emit("closeFunc");
    },
    getFocus(ev) {
      this.focusIndex = parseInt(ev.target.getAttribute("data-index"));
    },
    async insert(insertValue) {
      if (this.focusIndex === null) {
        return false;
      }
      const textareaElement = document.getElementById(
        "textarea" + this.focusIndex
      );
      if (
        textareaElement.selectionStart ||
        textareaElement.selectionStart === 0
      ) {
        var startPos = textareaElement.selectionStart;
        var endPos = textareaElement.selectionEnd;

        this.form.smsContent =
          textareaElement.value.substring(0, startPos) +
          insertValue +
          textareaElement.value.substring(endPos, textareaElement.value.length);

        await this.$nextTick();
        textareaElement.focus();
        textareaElement.setSelectionRange(
          endPos + insertValue.length,
          endPos + insertValue.length
        );
      } else {
        this.form.smsContent += insertValue;
      }
    },
    getData(code) {
      messageTemplate.detail(code).then(res => {
        if (null != res.data.data) {
          this.form.smsContent = res.data.data.smsContent;
          this.insertLable = res.data.data.labels;
        }
      });
    }
  },
  watch: {
    messageConfigVisible(n) {
      if (n) {
        if (this.code) {
          this.getData(this.code);
        }
      } else {
        this.$refs["form"].resetFields();
        this.insertLable = [];
      }
    }
  }
};
</script>

<style lang="stylus" scoped>
.insertLable
  ul
    li
      float: left
      margin-right: 15px
      p
        color: #333333
      span
        color: #FF0000
        cursor: pointer
</style>